<template>
  <div class="time-period-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">系统设置</h2>
    </div>

    <!-- 快速操作卡片 -->
    <el-row :gutter="20" class="quick-actions">
      <el-col :xs="24" :sm="12" :md="6">
        <!-- <el-card class="action-card" shadow="hover" command="dict"> -->
        <el-card
          class="action-card"
          shadow="hover"
          @click.native="handleSystemCommand('dict')"
        >
          <div class="action-content">
            <div class="action-icon batch">
              <i class="el-icon-tickets"></i>
            </div>
            <div class="action-info">
              <div class="action-title">字典管理</div>
              <div class="action-desc">管理系统字典</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card
          class="action-card"
          shadow="hover"
          @click.native="handleSystemCommand('user')"
        >
          <div class="action-content">
            <div class="action-icon calendar">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="action-info">
              <div class="action-title">用户管理</div>
              <div class="action-desc">查看系统用户信息</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card
          class="action-card"
          shadow="hover"
          @click.native="handleSystemCommand('config')"
        >
          <div class="action-content">
            <div class="action-icon reserve">
              <i class="el-icon-setting"></i>
            </div>
            <div class="action-info">
              <div class="action-title">参数设置</div>
              <div class="action-desc">设置系统参数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card
          class="action-card"
          shadow="hover"
          @click.native="handleSystemCommand('file')"
        >
          <div class="action-content">
            <div class="action-icon file">
              <i class="el-icon-files"></i>
            </div>
            <div class="action-info">
              <div class="action-title">图文管理</div>
              <div class="action-desc">查看系统图文信息</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 字典管理页面 -->
    <DictManagement v-if="activeIndex === '1'"/>
    <!-- 用户管理页面 -->
    <UserManagement v-if="activeIndex === '2'"/>
    <!-- 参数设置管理页面 -->
    <ConfigManagement v-if="activeIndex === '3'"/>
    <!-- 附件管理页面 -->
    <OssManagement v-if="activeIndex === '4'"/>
    <!-- 新闻公告管理页面 -->
    <NoticeManagement v-if="activeIndex === '5'"/>
    <!-- 小程序导航链接管理 -->
    <TopLinkManagement v-if="activeIndex === '6'"/>
  </div>
</template>

<script>
import DictManagement from '@/view/system/dict'
import UserManagement from '@/view/system/user'
import ConfigManagement from '@/view/system/config'
import OssManagement from '@/view/system/oss'
import NoticeManagement from '@/view/system/notice'
import TopLinkManagement from '@/view/system/topLink'
export default {
  name: "SystemSettingManagement",
   components: {
        DictManagement,
        UserManagement,
        ConfigManagement,
        OssManagement,
        NoticeManagement,
        TopLinkManagement,
    },

  methods: {
    handleSystemCommand(command) {
      switch (command) {
        case "dict":
          this.activeIndex = "1";
          break;
        case "user":
          this.activeIndex = "2";
          break;
        case "config":
          this.activeIndex = "3";
          break;
        case "oss":
          this.activeIndex = "4";
          break; 
        case "notice":
          this.activeIndex = "5";
          break;  
        case "top":
          this.activeIndex = "6";
          break;                 
        // case "user":
        //   this.$confirm("确定要退出登录吗？", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning",
        //   })
        //     .then(() => {
        //       authAPI.logout();
        //       this.isLoggedIn = false;
        //       this.currentUser = "";
        //       this.userInfo = {
        //         name: "管理员",
        //         role: "系统管理员",
        //         avatar: "",
        //         email: "admin@example.com",
        //         phone: "138****8888",
        //         department: "信息技术部",
        //       };
        //       this.$message.success("已退出登录");
        //     })
        //     .catch(() => {});
        //   break;
      }
    },
  },
};
</script>

<style scoped>
.time-period-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1d39c4;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quick-actions {
  margin-bottom: 20px;
}

.action-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(29, 57, 196, 0.15);
}

.action-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.action-icon.reserve {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.action-icon.batch {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
}

.action-icon.calendar {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
}
.action-icon.file {
  background: linear-gradient(135deg, #76419b 0%, #741965 100%);
}

.action-info {
  flex: 1;
}

.action-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d39c4;
  margin-bottom: 5px;
}

.action-desc {
  font-size: 14px;
  color: #666;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.search-form {
  margin-bottom: 0;
}

.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(29, 57, 196, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #1d39c4;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.price {
  font-weight: 600;
  color: #f56c6c;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}

/* Element UI 样式覆盖 */
::v-deep .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

::v-deep .el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

::v-deep .el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

::v-deep .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

::v-deep .el-select .el-input__inner {
  border-radius: 8px;
}

::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-table th {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  color: #1d39c4;
  font-weight: 600;
  border: none;
}

::v-deep .el-table td {
  border: none;
  border-bottom: 1px solid #f0f2f5;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fafbff;
}

::v-deep .el-pagination {
  text-align: right;
}

::v-deep .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

::v-deep .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #f8f9ff 0%, #f1f3ff 100%);
  padding: 20px 24px;
}

::v-deep .el-dialog__title {
  color: #1d39c4;
  font-weight: 600;
  font-size: 18px;
}

::v-deep .el-form-item__label {
  color: #1d39c4;
  font-weight: 500;
}

::v-deep .el-tag {
  border-radius: 6px;
  font-weight: 500;
}

::v-deep .el-card__body {
  padding: 20px;
}

@media (max-width: 768px) {
  .time-period-management {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .quick-actions {
    margin-bottom: 15px;
  }

  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    display: block;
    margin-bottom: 15px;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .table-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>
